<template>
    <div>
        <div class="search-container">
            <div class="top">
                <div class="top-left">
                    <el-icon>
                        <Search />
                    </el-icon>
                    <span>筛选搜索</span>
                </div>
                <div class="top-right">
                    <!-- 重置  查询搜索 按钮 -->
                    <el-button type="info" @click="restKeyWord">重置</el-button>
                    <el-button type="primary" @click="queryList">查询搜索</el-button>
                </div>
            </div>
            <div class="bottom">
                <el-form :inline="true" class="demo-form-inline" label-width="120px">
                    <el-form-item label="输入搜索:">
                        <el-input v-model="formInline.id" placeholder="服务单号" clearable />
                    </el-form-item>
                    <el-form-item label="处理状态:">
                        <el-select v-model="formInline.status" placeholder="全部" clearable>
                            <el-option label="待处理" value="0" />
                            <el-option label="退货中" value="1" />
                            <el-option label="已完成" value="2" />
                            <el-option label="已拒绝" value="3" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="申请时间:">
                        <el-date-picker v-model="formInline.createTime" type="date" placeholder="请选择时间" clearable />
                    </el-form-item>
                    <el-form-item label="操作人员:">
                        <el-input v-model="formInline.memberUsername" placeholder="全部" clearable />
                    </el-form-item>
                    <el-form-item label="处理时间:">
                        <el-date-picker v-model="formInline.handleTime" type="date" placeholder="请选择时间" clearable />
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <!-- 数据列表 -->
        <div class="list-container">
            <div class="left">
                <el-icon size="18">
                    <Tickets />
                </el-icon>
                <span>数据列表</span>
            </div>
        </div>

        <div class="table">
            <el-table @selection-change="handleSelectionChange" :data="tableData" style="width: 100%" border>
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column prop="id" label="服务单号" width="380" style="padding: 10px 0;" align="center" />
                <el-table-column prop="createTime" label="申请时间" align="center" width="180">
                    <template #default="scope">
                        {{ dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
                    </template>
                </el-table-column>
                <el-table-column prop="memberUsername" label="用户账号" align="center" width="340" />
                <el-table-column prop="productRealPrice" label="退款金额" align="center" width="120">
                    <template #default="scope">
                        ￥{{ scope.row.productRealPrice }}
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="申请状态" align="center" width="120">
                    <template #default="{ row }">
                        {{ convertToChinese(row.status) }}
                    </template>
                </el-table-column>>
                <el-table-column prop="handleTime" label="处理时间" align="center" width="180">
                    <template #default="scope">
                        {{ dayjs(scope.row.handleTime).format("YYYY-MM-DD HH:mm:ss") }}
                    </template>
                </el-table-column>
                <el-table-column prop="操作" label="操作" align="center" fixed="right">
                    <template #default="{ row }">
                        <!-- <router-link :to="{ name: 'returnApplyDetail', query: { id: row.id } }">
                            <el-button>查看详情</el-button>
                        </router-link> -->

                        <el-button @click="formInlineId(row.id)">查看详情</el-button>
                    </template>
                    <!-- <router-link :to=" /oms/returnApplyDetail"> -->
                    <!-- <router-link :to="{ name: 'returnApplyDetail', params: { id: formInline.id } }"> -->
                    <!-- <router-link :to=`/oms/returnApplyDetail?id=${formInline.id}`>
                        <el-button>查看详情</el-button>
                    </router-link> -->
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页器 组件 -->
        <div class="pagination-box">
            <div class="bot-left">
                <el-select placeholder="批量删除" clearable>
                    <el-option label="批量删除" value="3" />
                </el-select>
                <el-button type="primary" @click="del">确定</el-button>
            </div>
            <div>
                <el-pagination v-model:current-page="paginationParams.currentPage"
                    v-model:page-size="paginationParams.pageSize" :page-sizes="[5, 10, 15]"
                    layout="total, sizes, prev, pager, next, jumper" :total="paginationParams.total" :background="true"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ElMessage, ElMessageBox, dayjs } from 'element-plus';
import * as http from '@/request/http'
import { useRouter } from 'vue-router';
const router = useRouter();
// import { useRouter } from 'vue-router';
// import useTable from '@/hooks/components/useTable';
const formInline = reactive({
    id: '', // 服务单号
    status: '', // 处理状态
    createTime: '', // 申请时间
    memberUsername: '', // 操作人员
    handleTime: '', // 处理时间
})

// 传参id
// @click="formInlineId(row.id)"
const formInlineId = (val: any) => {
    console.log(router)
    //  /oms/returnApplyDetail
    router.push({ path: 'returnApplyDetail', query: { id: val } })
}

// const formInlineId = () => {
//     http.order.returnApplyList().then(res => {
//         const id = formInline.id = res.data.list.id
//         return id
//     })
// }
// console.log(formInlineId.id);


// 申请状态
const convertToChinese = (number: number) => {
    // console.log(number);
    // 在这里根据你的需求将数字转化为中文
    const chineseStatus = ['待处理', '退货中', '已完成', '已拒绝'];
    return chineseStatus[number] || '未知状态';
}

// const statusMap = {
//     0: "待处理",
//     1: "退货中",
//     2: "已完成",
//     3: "已拒绝",
//   };
// 查询参数对象   keyword关键字
// const searchParams = reactive({
//     keyword: '',
// })

// 调用useTable函数  实现table数据渲染 以及 分页器功能
// const {
//     tableData,
//     paginationParams,
//     handleCurrentChange,
//     handleSizeChange,
// } = useTable(http.order.returnApplyList, {});

// 表格 数据


const tableData = ref<any>([]);
// 分页器相关参数
const paginationParams = reactive({
    currentPage: 1,
    pageSize: 5,
    total: 100,
});


// 提取查询数据的方法(获取表格数据和搜索框用的都是同一个请求接口)
const queryList = () => {
    http.order.returnApplyList({
        pageNum: paginationParams.currentPage,
        pageSize: paginationParams.pageSize,
        id: formInline.id,
        status: formInline.status,
        createTime: formInline.createTime,
        memberUsername: formInline.memberUsername,
        handleTime: formInline.handleTime
    }).then((res) => {
        tableData.value = res.data.list;
        paginationParams.total = res.data.total;
    });
};


// 发送请求 获取数据
queryList();

// 改变 分页器的页容量
const handleSizeChange = (val: number) => {
    console.log(`页容量发生变化 : ${val}`);
    // 重新请求    更新数据
    queryList();
};
// 改变 分页器的当前页
const handleCurrentChange = (val: number) => {
    console.log(`当前页发生变化 : ${val}`);
    // 重新请求  更新数据
    queryList();
};

// 删除
let selectList: any;
const multipleSelection = ref<any>([])
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
    console.log(val);

    selectList = multipleSelection.value.map((item: any) => item.id)
}

const del = () => {
    let ids = selectList.join(',')
    ElMessageBox.confirm('是否要进行该删除操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        http.order.returnApplyDelete(ids).then(res => {
            if (res.code == 200) {
                console.log(ids);
                queryList();
                ElMessage.success("删除成功")
            } else {
                ElMessage.warning("删除失败")
            }
        })
    }).catch(() => { })
}



// 点击 重置(清空) 搜索框
const restKeyWord = () => {
    formInline.createTime = '',
        formInline.handleTime = '',
        formInline.id = '',
        formInline.memberUsername = '',
        formInline.status = ''
}

</script>

<style scoped lang="less">
.search-container {
    padding: 20px;
    // box-shadow: 0 2px 12px 1px rgba(0, 0, 0, .1);
    border: 1px solid #ebeef5;
    border-radius: 4px;
    display: flex;
    flex-direction: column;

    .top {
        display: flex;
        justify-content: space-between;

        .top-left {
            display: flex;
            align-items: center;

            span {
                margin-left: 15px;
            }
        }
    }
}

.list-container {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    margin: 20px 0;
    // box-shadow: 0 2px 12px 1px rgba(0, 0, 0, .1);
    border: 1px solid #ebeef5;
    border-radius: 4px;

    .left {
        display: flex;
        align-items: center;

        span {
            margin-left: 10px;
        }
    }
}

.pagination-box {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;

    .el-button {
        margin-left: 15px;
    }
}
</style>